<template>
  <div class="videoBox" :id="'videoPlayer'+videoId"></div>
</template>
<script>
  // import Aliplayer from 'Aliplayer';
  import Util from '../assets/Util';
  export default {
    name: 'playVideo',
    props: {
      videoID:{
        type:String
      },
      autoPlay:Boolean
    },
    data () {
      return {
        videoId : this.videoID,
        autoplay:this.autoPlay
      }
    },
    mounted(){
      let that = this;
      setTimeout(()=>{
        that.getOauth();
      },1500)

    },
    methods: {
      // 获取视频播放权限
      getOauth(){
        let that = this;
        let props = {
          "url":"/Video/GetPlayAuth",
          "data":{
            "videoID":that.videoId
          },
          sCallBack:(res) => {
            console.log(res);
            that.makePlayer(res);
          },
          eCallBack:(err) => {
            console.log(err);
          }
        };
        Util.myRequest(props);
      },
      makePlayer(playerInfo){
        var playerData = playerInfo.data.data;
        let that = this;
        let player = new Aliplayer({
          id: "videoPlayer"+that.videoId, // 容器id
          vid : playerData['videoId'],
          playauth : playerData['playAuth'],
          width: "100%",
          height: "100%",
          autoplay: that.autoplay
        }, function(player){
          console.log('播放器创建了');
        });
      }
    }
  }
</script>

<style scoped>
@import "https://g.alicdn.com/de/prismplayer/2.7.2/skins/default/aliplayer-min.css";
.videoBox{
  width:500px;
  height:500px;
  border-radius:8px;
}
</style>
